<template>
	<view>
		<view class="detail-swiper-selector">
			<!-- 汽车轮播图  -->
			<su-swiper
			  class="ss-m-b-14"
			  isPreview
			  :list="props.goodsSwiper"
			  dotStyle="tag"
			  imageMode="widthFix"
			  dotCur="bg-mask-40"
			  :seizeHeight="750"
			/>
		</view>
		
		<view class="detail-content">
			<view class="detail-card detail-top">
				<view class="detail-name">
					<text class="car-name">{{props.carInfo.name}}</text>
					<block v-if="props.carInfo.type">
						<text class="car-type" v-for="item in props.carInfo.type">{{item}}</text>
					</block>
				</view>
				<!-- <view class="car-type-list ss-flex ss-m-t-10">
					<view class="type-item">插电混动</view>
					<view class="type-item">纯电动</view>
				</view> -->
			</view>
			
			<view class="detail-card car-price-bg">
				<view class="car-price">{{props.carInfo.price}}</view>
				<view class="gf-price">指导价：{{props.carInfo.price}}</view>
			</view>
			
			<view class="car-model">
				<view class="car-model-title">车型</view>
				
				<!-- <view class="car-tabs ss-flex">
					<view 
						class="tabs-item" 
						:class="{'tabs-item-active': item.id == state.activeId}" 
						v-for="item in state.carTabs"
						@click="changeTabs(item)"
						>{{item.name}}
					</view>
				</view> -->
			</view>
			
			<view class="car-model-list">
				<view class="model-item" v-for="item in props.carList">
					<view class="ss-flex">
						<view class="model-name">{{item.name}}</view>
						<view class="model-price">{{item.price}}</view>
					</view>
					<view class="car-type-list ss-flex ss-m-t-16">
						<view class="type-item type-item-orange">{{item.salestate}}</view>
						<view class="type-item type-item-grey">{{item.sizetype}}</view>
					</view>
					<view class="ss-flex ss-row-between ss-m-t-10">
						<view class="gf-price" style="margin-top: 0;">指导价：{{item.price}}</view>
						<view class="item-contrast" @click="deletePkCar(item)" v-if="state.pkListIds.includes(item.car_id)">
							<uni-icons type="closeempty" size="14"></uni-icons>
							<text>取消</text>
						</view>
						<view class="item-contrast" @click="addPkCar(item)" v-else>
							<uni-icons type="plusempty" size="14"></uni-icons>
							<text>对比</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, watch, computed } from 'vue';
	import sheep from '@/sheep';
	
	const pkCar = sheep.$store('pkCar');
	
	const props = defineProps({
		// 车辆信息
		carInfo: {
			type: Object,
			default: () => {}
		},
		// 轮播图
		goodsSwiper: {
			type: Array,
			default: () => []
		},
		// 车型列表
		carList: {
			type: Array,
			default: () => []
		}
	})
	
	const state = reactive({
		pkListIds: computed(() => pkCar.listIds),
		activeId: '1',
		carTabs: [
			{id: '1', name: '在售'}
		],
		carInfo: {},
		goodsSwiper: [],
		carList: [],
	})
	
	function changeTabs(item) {
		state.activeId = item.id
	}
	
	function addPkCar(item) {
		pkCar.add(item)
	}
	
	function deletePkCar(item) {
		pkCar.delete(item)
	}
	
	async function getCarDetails(car_id) {
		const res = await sheep.$api.car.carSku({type: 1, ids: car_id})
		state.carInfo = {
			name: res.data.canpei?.car_details_json.parentname,
			type: Object.values(res.data.type),
			price: res.data.price
		}
		state.goodsSwiper = res.data.image.map(src => ({type: 'image', src}))
		state.carList = res.data.data
	}
	
</script>

<style lang="scss" scoped>
	.detail-content {
		
		.detail-card {
			background-color: #ffff;
			margin: 14rpx 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
			padding: 20rpx 30rpx;
		}
		
		.detail-top {
			margin: 0;
			background-image: linear-gradient(180deg, #ffffff 40%, #f5f5f5 100%);
			
			.detail-name {
				.car-name {
					font-size: 34rpx;
					font-weight: 800;
					color: #333;
				}
				.car-type {
					font-size: 26rpx;
					color: #999;
					margin-left: 20rpx;
				}
			}
		}
		
		.car-price-bg {
			// background-image: linear-gradient(135deg, #fcefea 0%, #f9dbca 100%);
			
		}
	}
	
	.car-price {
		font-size: 28rpx;
		color: #ff6400;
		font-weight: 600;
	}
	
	.gf-price {
		font-size: 24rpx;
		color: #666;
		margin-top: 10rpx;
	}
	
	.car-type-list {
		
		.type-item {
			border: 1rpx solid #007ef1;
			padding: 0 10rpx;
			line-height: 32rpx;
			font-size: 20rpx;
			color: #007ef1;
			margin-right: 10rpx;
			border-radius: 6rpx;
		}
		
		.type-item-orange {
			border-color: #ff6400;
			color: #ff6400;
		}
		.type-item-grey {
			border-color: #848792;
			color: #848792;
		}
	}
	
	.car-model {
		background-image: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
		padding: 0 30rpx;
		
		.car-tabs {
			margin-top: 20rpx;
			.tabs-item {
				font-size: 26rpx;
				text-align: center;
				padding: 4rpx 12rpx;
				background: #f7f8fb;
				margin-right: 20rpx;
			}
			
			.tabs-item-active {
				background: rgba(255,100,0,.1);
				color: #ff6400;
			}
		}
		
		.car-model-title {
			padding: 30rpx 0;
			font-size: 28rpx;
			font-weight: 800;
			border-bottom: 1rpx solid #e5e5e5;
		}
	}
	
	.car-model-list {
		
		.model-item {
			background-color: #ffff;
			border-radius: 10rpx;
			overflow: hidden;
			padding: 20rpx 30rpx;
			margin: 14rpx 20rpx;
			
			.model-name {
				width: 400rpx;
				font-size: 30rpx;
				font-weight: 500;
			}
			.model-price {
				flex: 1;
				align-self: flex-start;
				font-size: 28rpx;
				font-weight: 500;
				color: #ff6400;
				text-align: right;
			}
		}
		
		.item-contrast {
			font-size: 26rpx;
			font-weight: 500;
			color: #333;
			width: fit-content;
			border: 1rpx solid #2d313e;
			padding: 0 15rpx;
			line-height: 40rpx;
			color: #2d313e;
		}
	}
</style>